<template>
  <el-dialog :visible.sync="dialogFormVisible" width="500px" @close="close">
    <template slot="title">
      <div>
        <svg-icon icon-class="my-rolesetting" />
        <span>{{ title }}</span>
      </div>
    </template>
    <el-tree
      ref="menuTree"
      :check-strictly="true"
      :data="menuTree"
      show-checkbox
      node-key="id"
      highlight-current
      :default-checked-keys="defaultCheckedKeysMenu"
      :props="defaultPropsMenu"
    ></el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveRoleMenu">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getAction, postAction } from '@/api/action'

  export default {
    name: 'RoleSetting',
    data() {
      return {
        roleId: undefined, //角色的id
        // 格式化后端传过来的数据为vue树所需参数
        defaultPropsMenu: {
          children: 'children',
          label: 'name',
        },
        defaultCheckedKeysMenu: [], //此数组代表当前用户所具有的菜单详情
        menuList: [],
        menuTree: [],

        defaultPropsWxAccount: {
          children: 'children',
          label: 'name',
        },
        url: {
          treeMenu: '/presoftasim/system/menu/treeMenu', //将为角色分配的菜单
          roleMenu: '/presoftasim/system/roleMenu/list', //获得当前角色的菜单信息
          createRoleMenu: '/presoftasim/system/roleMenu/saveRoleMenu',
        },
        dialogFormVisible: false,
        title: '',
      }
    },
    created() {
      //获得具体的树 和 菜单
      this.getMenuTabData()
      //获得当前角色的树
    },
    methods: {
      //打开对话框的方法,拿到当前操作的角色的id
      showEdit(row) {
        if (this.$refs.menuTree) {
          this.$refs.menuTree.store._getAllNodes().forEach((item) => {
            item.expanded = false
          })
          this.$refs.menuTree.setCheckedKeys([])
        }
        this.title = '权限设置'
        this.roleId = row.id
        this.getRoleMenu()
      },
      // 角色与菜单关联
      getMenuTabData() {
        getAction(this.url.treeMenu).then((res) => {
          this.menuList = res.data.menuList
          this.menuTree = res.data.menuTree //详细的树形下拉列表
        })
      },
      // 获得当前角色的详细菜单信息
      getRoleMenu() {
        let that = this
        getAction(that.url.roleMenu, { roleId: that.roleId }).then((res) => {
          that.defaultCheckedKeysMenu = []
          let arr = res.data
          //循环遍历处理
          arr.map((item) => {
            that.defaultCheckedKeysMenu.push(item.menuId.toString())
          })
          this.dialogFormVisible = true
        })
      },
      saveRoleMenu() {
        var selectedIds = this.$refs.menuTree.getCheckedKeys().concat([])
        this.close()
        // this.roleId = this.roleId;// 转换成数字类型
        postAction(this.url.createRoleMenu, {
          roleId: this.roleId,
          menuIds: selectedIds.join(','),
        }).then((response) => {
          // 反应有点慢
          if (response.code === 200) {
            this.$baseMessage(response.message, 'success')
          } else {
            this.$baseMessage(response.message, 'error')
          }
        })
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
